<template>
  <view class="particulars">
    <!-- 可滚动视图，垂直滚动 -->
    <scroll-view scroll-y="true" class="scroll-view">
      <!-- 头像部分 -->
      <uni-card :cover="baseImgUrl + user.avatar" class="overlay-text">
        <div :class="shade">
          <!-- 图片加载成功显示用户头像 -->
          <image
            :src="baseImgUrl + user.avatar"
            mode="scaleToFill"
            v-if="user.avatar"
          />
          <img
            src='/static/tabs/user_default.png'
            :style="{
              width: '80vw',
              height: '80vw',
            }"
            v-else
          />
        </div>
      </uni-card>
      <!-- 基本信息部分 -->
      <img
        src="../../../static/detaile/role.png"
        style="width: 40rpx; height: 40rpx; margin-left: 10px"
      />
      <text class="particulars-title">详细信息</text>
      <!-- 如果shade为'overlay'则显示登录提示，否则显示用户详细信息 -->
      <view v-if="shade === 'overlay'">
        <button class="particulars-lock">
          <img src="../../../static/detaile/lock.png" style="width: 40rpx; height: 40rpx" />
          登录注册后可看个人资料
        </button>
      </view>
      <view v-else class="user-details">
        <view class="detail-item">
          <!-- 年龄 -->
          <view>
            <text class="label">年龄:</text>
            <text class="value">{{ user.age }}</text>
          </view>
          <!-- 身高 -->
          <view>
            <text class="label">身高:</text>
            <text class="value">{{ user.height }}</text>
          </view>
          <!-- 住房情况 -->
          <view>
            <text class="label">住房情况:</text>
            <text class="value">{{ user.housing_status }}</text>
          </view>
          <!-- 婚姻状况 -->
          <view>
            <text class="label">婚姻状况:</text>
            <text class="value">{{ user.marital_status == '1' ?  '离异' : '未婚' }}</text>
          </view>
        </view>
      </view>

      <!-- 择偶标准部分 -->
      <img
        src="../../../static/detaile/select.png"
        alt=""
        style="width: 40rpx; height: 40rpx; margin-left: 10px"
      />
      <text class="particulars-title">择偶标准</text>

      <!-- 如果shade为'overlay'则显示登录提示，否则显示择偶标准 -->
      <view v-if="shade === 'overlay'">
        <button class="particulars-lock">
          <img src="../../../static/detaile/lock.png" style="width: 40rpx; height: 40rpx" />
          登录注册后可看择偶要求
        </button>
      </view>
      <view v-else class="user-details">
        <view class="detail-item">
          <!-- 年龄范围 -->
          <view>
            <text class="label">年龄范围:</text>
            <text class="value">{{ user.age_range?.includes('None') == true ? '不限' : user.age_range }}</text>
          </view>
          <!-- 身高范围 -->
          <view>
          </view>
          <!-- 最低学历 -->
          <view>
            <text class="label">最低学历:</text>
            <text class="value">{{ user.minimum_education }}</text>
          </view>
          <!-- 最低收入 -->
          <view>
            <text class="label">最低收入:</text>
            <text class="value">{{ user.minimum_income }}</text>
          </view>
          <!-- 房子要求 -->
          <view>
            <text class="label">房子要求:</text>
            <text class="value">{{ user.desired_housing_status }}</text>
          </view>
          <!-- 期望结婚时间 -->
          <view>
            <text class="label">期望结婚时间:</text>
            <text class="value">{{ user.marriage_expectation }}</text>
          </view>
        </view>
      </view>

      <!-- 自我评价部分 -->
      <img src="../../../static/detaile/mysay.png" alt="" style="width: 80rpx; height: 80rpx" />
      <text class="particulars-title">自我评价</text>

      <!-- 如果shade为'overlay'则显示登录提示，否则显示自我评价 -->
      <view v-if="shade === 'overlay'">
        <button class="particulars-lock">
          <img src="../../../static/detaile/lock.png" style="width: 40rpx; height: 40rpx" />
          登录注册后可看自我介绍
        </button>
      </view>
      <view v-else class="user-details">
        <view class="detail-item">
          <text class="value">{{ user.self_introduction }}</text>
        </view>
      </view>

      <!-- 占位以避免滚动内容被底部按钮遮挡 -->
      <div style="height: 80px"></div>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer">
      <!-- 分享按钮 -->
      <view class="fenxiang">
        <img src="../../../static/detaile/fenxiang.png" alt="" class="foter-img" />
      </view>
      <!-- 索要微信按钮，跳转到首页 -->
      <div class="jiao lianxi" @click="showPopup" >
        <view class="imgg">
          <img class="xiaopng foter-img" src="../../../static/detaile/xiaoxi.png" alt="" />
        </view>
        <text style="margin-left: 10rpx">索要微信</text>
      </div>
      <!-- 红娘牵线按钮，跳转到红娘页面 -->
      <navigator
        class="jiao red"
        hover-class="none"
        open-type="switchTab"
        url="/pages/matchmaker/matchmaker"
      >
        <view class="girl">
          <img class="xiaopng foter-img" src="../../../static/detaile/girl.png" alt="" />
        </view>
        <text class="particulars-text">红娘牵线</text>
      </navigator>
    </view>
  </view>
  <!-- 提示窗示例 -->
  <uni-popup ref="popup" type="center">
    <view class="popup-content">
      <text style="font-size: 35rpx">{{ dialogText }}</text>
      <view class="button-group">
        <button @click="confirm" class="particulars-button">确定</button>
        <button @click="cancel" class="particulars-button">取消</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// import { token } from 'pinia'
import { http, baseImgUrl } from '@/utils/http'
import UniPopup from './UniPopup.vue'
import { useMemberStore } from '@/stores'
import { addVisitorAPI } from "@/services/index/home";
import { onLoad } from '@dcloudio/uni-app';
//判断是否登录
// const shade = ref('overlay')
const shade = ref('')
//获取传来的id
const id = ref('')
//当前用户的基本信息
const user = ref({})
const getlist = async () => {
  const list = http({
    url: `/get/api/v1/develop/seek/information?my_id=${id.value}`,
    method: 'GET',
  })
  user.value = (await list).my_list
}
const my_gold = ref(80)
//查看自己的金币
const getGold = async () => {
  const list = http({
    url: `/get/api/v1/develop/getconins?id=${my_id.value}`,
    method: 'GET',
  })
  // my_gold.value = (await list).money
}


const popup = ref<InstanceType<typeof UniPopup> | null>(null)
const dialogText = ref('需消耗50金币，索要她（他）的微信')

const showPopup = () => {
  console.log('点击了弹出层按钮')
  popup.value!.open()
}

const confirm = () => {
  popup.value!.close()

  if (my_gold.value < 50 || my_gold.value == undefined) {
    // 轻提示
    uni.showToast({
      title: '金币不足',
      icon: 'none',
      duration: 2000,
    })
    return
  } else {
    http({
      url: '/get/api/v1/develop/Interchanges',
      method: 'POST',
      data: {
        u_id: my_id.value,
        invited_id: id.value,
      },
    }).then((res) => {
      console.log(res)
      uni.showToast({
        title: '索要成功',
        icon: 'none',
        duration: 2000,
      })
    })
  }
}

const cancel = () => {
  popup.value!.close()
  console.log('点击了取消按钮')
}

const my_id = ref('')
const toToken = () => {
  const data = uni.getStorageSync('userInfo')
  my_id.value = data.id
  if (data.token) {
    shade.value = ''
  } else {
    shade.value = 'overlay'
  }
  getGold()
}

//lth 访客记录
onLoad((props) => {
  postNewVisitor(props?.id)
})

//lth 添加访客
const postNewVisitor = async (visitorId: string) => {
  const user_id = uni.getStorageSync('userInfo').id
  await addVisitorAPI({ user_id: user_id, viewed_id: visitorId })
}

// 验证是否有token
onMounted(() => {
  const currentPages = getCurrentPages()
  const currentPage = currentPages[currentPages.length - 1]
  console.log(currentPage.options.id)

  if (currentPage.options.id) {
    id.value = currentPage.options.id
  }
  getlist() //请求数据
  // storage() //获取本地存储
  toToken() //验证是否登录
  return {
    id,
  }
})
</script>
<style lang="scss" scoped>
.particulars-button {
  background-color: rgb(27, 178, 197);
  color: white;
}
.dialog-content {
  padding: 20px;
  text-align: center;
}
.button-group {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.particulars-text {
  margin-left: 10rpx;
  font-size: 32rpx;
}
.scroll-view {
  height: 100%;
  overflow-y: scroll; /* 确保Y轴可以滚动 */
  border: 1rpx solid #ccc; /* 可选，添加一个边框以便于查看 */
}
.foter-img {
  height: 56rpx;
  width: 56rpx;
}
.particulars-lock {
  background-color: rgb(124, 210, 221);
  width: 80%;
  border-radius: 50rpx;
  padding: 10rpx;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.5);
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.image-container {
  width: 600rpx;
  height: 600rpx;
  position: relative;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(241, 239, 239, 0.5);
  backdrop-filter: blur(10rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.overlay-text {
  height: 200rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 150rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 20rpx 0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 10rpx;
}

.footer .jiao {
  padding: 20rpx;
  background: pink;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .fenxiang {
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(90deg, #d491f9, #be6cec);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .lianxi,
.footer .red {
  height: 100rpx;
  background: linear-gradient(90deg, #29b6c8, #11aec2);
  border-radius: 100rpx;
  padding: 20rpx;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer .red {
  background: linear-gradient(90deg, #fb7b63, #fa5638);
}

.footer .imgg,
.footer .girl {
  border-radius: 100%;
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.particulars-title {
  font-size: 36rpx;
  color: #000;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
}

.user-details {
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx #dfb8b8;
  background-color: #f1eef1;
  .detail-item {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    word-wrap: break-word;
    .label {
      margin-left: 20rpx;
      color: #c23c86;
    }
    .value {
      margin-left: 20rpx;
      color: #3cc2bb;
    }
  }
}
</style>
